import styles from './index.module.scss'
import Image from '@c/image'
import Link from 'next/link'
import cm from 'classnames'
import { useRef } from 'react'
import Null from '../../null'

const Index = props => {
  const { type, data, content = '暂无收藏历史' } = props
  const imgContainerRef = useRef()

  // 数据为空则渲染null
  if (!data || !data.length)
    return <Null content={content} loginTxt="登录后才能查看点播收藏哦~" className={styles.null} />
  return (
    <div className={styles.items}>
      {data.map((item, index) => {
        let href = type === 'history' ? `/vod/play-official/${item.cid}/${item.num || 1}` : `/vod/detail/${item.id}`
        return (
          <figure key={index} className={cm('history-item', styles.item)} ref={imgContainerRef}>
            <Link href={href}>
              <div className={styles.img} data-txt={item.countStr}>
                <Image className="img" src={item.img || item.picurl} alt={item.name || '详情海报'} />
                {item.score ? <span className={styles.score}>{('' + item.score).toFix(1)}</span> : null}
              </div>
              <p className={cm(styles.name, 'textEllipsis')}>{item.name}</p>
            </Link>
          </figure>
        )
      })}
    </div>
  )
}

export default Index
